<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
		<el-form-item label="账号设置">
			<el-col :span="12">
				<el-input placeholder="请输入内容" v-model="form.name" disabled>
					<template slot="prepend">用户名</template>
				</el-input>
			</el-col>
			<el-col :span="12">
				<el-input placeholder="请输入内容" v-model="form.email">
					<template slot="prepend">邮箱</template>
				</el-input>
			</el-col>
		</el-form-item>
		<el-form-item label="用户昵称">
		    <el-input v-model="form.nick_name"></el-input>
		</el-form-item>
		<el-form-item label="用户头像">
		    <el-input v-model="form.avatar"></el-input>
		</el-form-item>
		<el-form-item label="个人网站">
		    <el-input v-model="form.website"></el-input>
		</el-form-item>
		<el-form-item label="个人简介">
		    <el-input v-model="form.description" type="textarea" :rows="2"></el-input>
		</el-form-item>
		<el-form-item label="状态设置">
			<el-col :span="8">
				<el-form-item label="管理员">
				    <el-switch v-model="form.is_admin" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="是否可用">
					<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="邮件通知">
					<el-switch v-model="form.email_notify_enabled" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>
			</el-col>
		</el-form-item>		
		<el-form-item class="submit-btn">
		    <el-button type="primary" @click="onSubmit">立即{{type}}</el-button>
		    <el-button @click="cancel">取消</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {FormFunc} from 'common/formMixin'

	export default {
		mixins: [FormFunc],
		props: {
		  form: {
		  	type: Object,
		  	default: () => {
		  		return {
		  			name: '',
		  			nick_name: '',
		  			email: '',
		  			avatar: '',
		  			website: '',
		  			description: '',
		  			is_admin: false,
		  			status: true,
		  			email_notify_enabled: true
		  		}
		  	}
		  }
		},
		data() {
			return {
				url: 'user'
			}
		}
	}
</script>

<style scope>
.submit-btn {
	margin: 0;
	text-align: center;
}
.el-input-group--prepend {
	width: 95%;
}
</style>